import React from 'react'
import './index.css'

interface IProps {
  content: {
    width: number
    height: number
  }
  border: {
    topWidth: number
    topStyle: string
    topColor: string
    leftWidth: number
    leftStyle: string
    leftColor: string
    rightWidth: number
    rightStyle: string
    rightColor: string
    bottomWidth: number
    bottomStyle: string
    bottomColor: string
  }
  padding: {
    topWidth: number
    leftWidth: number
    rightWidth: number
    bottomWidth: number
  }
  margin: {
    topWidth: number
    leftWidth: number
    rightWidth: number
    bottomWidth: number
  }
}

const BoxModel: React.FunctionComponent<IProps> = ({
  content,
  padding,
  border,
  margin,
}) => (
  <div className='box-margin'>
    <span>{margin.topWidth}</span>
    <span>{margin.rightWidth}</span>
    <span>{margin.bottomWidth}</span>
    <span>{margin.leftWidth}</span>
    <div className='box-border'>
      <span>{border.topWidth}</span>
      <span>{border.rightWidth}</span>
      <span>{border.bottomWidth}</span>
      <span>{border.leftWidth}</span>
      <div className='box-padding'>
        <span>{padding.topWidth}</span>
        <span>{padding.rightWidth}</span>
        <span>{padding.bottomWidth}</span>
        <span>{padding.leftWidth}</span>
        <div className='box-content'>{`${content.width} x ${content.height}`}</div>
      </div>
    </div>
  </div>
)

export default BoxModel
